<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<link href="css/index.css" rel="stylesheet" type="text/css">
<body>
    <div class="page1">
        <b class="balloon"></b>
        <b class="cloud_s"></b>
        <b class="cloud_m"></b>
        <b class="cloud_b"></b>
        <div class="water"></div>
        <div class="p1_car"></div>
        <div class="p1_title"></div>
    </div>
    <div class="page2">
        <div class="board">
        </div>
        <div class="p2_title"></div>
        <div class="p2_info1"></div>
        <div class="p2_info2"></div>
        <div class="p2_info3"></div>
    </div>
    <div class="page3">

    </div>
</body>
<script src="js/touch-ppt.js"></script>

<script>
    window.onload = function () {
        var newppt = new touchPPT({
            '.page1':{
                '.water': {
                    type:'join-hiding',
                    speed: 6000,
                    route: 10
                },
                '.p1_title': {
                    type: 'join-hiding',
                    speed: 6000,
                    route: 45
                },
                '.p1_car': {
                    type: 'join-hiding',
                    speed: 6500
                }

            },
            '.page2':{
                '.p2_title': {
                    type: 'join-hiding join-top',
                    speed: 2000,
                    route: 5
                },
                '.p2_info1': {
                    type: 'join-hiding',
                    speed: 2000,
                    route: 15
                },
                '.p2_info2': {
                    type: 'join-hiding',
                    speed: 2000,
                    route: 25
                },
                '.p2_info3': {
                    type: 'join-hiding',
                    speed: 2000,
                    route: 35
                }
            },
            '.page3': {

            }
        },false);
    };
</script>
</html>
